<template>
    <div>
       <!--  <header class="header clearfix">
            <div class="hd-title">健康资讯</div>
            <a href="javascript:void(0)" class="return"></a>
        </header> -->
        <ul class="tab1">
            <li :class="{cur:tabsign==1}" @click="tabgetlist">最新</li>
            <li :class="{cur:tabsign==2}" @click="tabgetlist">糖尿病</li>
            <li :class="{cur:tabsign==3}" @click="tabgetlist">高血压</li>
            <li :class="{cur:tabsign==4}" @click="tabgetlist">其他</li>
        </ul>
        <div class="newslist" :class="{none:tabsign!=1}">
            <a :href='item.aurl' v-for="item in newslist1" track-by="$index">
                <ul class='newslist_unit cbafter'>
                    <li class='newstit'>
                        <div class="newsdetailtit">
                            <h2>{{item.infoTitle}}</h2>
                            <p>{{item.infoApplyUserName}}  {{item.levelText}}</p>
                            <p><span>{{item.infoVerifyTime}}</span><span>{{item.likedCount}}</span></p>
                        </div>
                    </li>
                    <li class='newsimg'><img :src='item.infoTitlePicture'></li>
                </ul>
            </a>
            <div class="more cb" @click="getmoredata" v-show="newslist1.length>0&&more1">加载更多>></div>
        </div>
        <div class="newslist" :class="{none:tabsign!=2}">
            <a :href='item.aurl' v-for="item in newslist2">
                <ul class='newslist_unit cbafter'>
                    <li class='newstit'>
                        <div class="newsdetailtit">
                            <h2>{{item.infoTitle}}</h2>
                             <p>{{item.infoApplyUserName}}  {{item.levelText}}</p>
                            <p><span>{{item.infoVerifyTime}}</span><span>{{item.likedCount}}</span></p>
                        </div>
                    </li>
                    <li class='newsimg'><img :src='item.infoTitlePicture'></li>
                </ul>
            </a>
            <div class="more cb" @click="getmoredata" v-show="newslist2.length>0&&more2">加载更多>></div>
        </div>


        <div class="newslist" :class="{none:tabsign!=3}">
            <a :href='item.aurl' v-for="item in newslist3">
                <ul class='newslist_unit cbafter'>
                    <li class='newstit'>
                        <div class="newsdetailtit">
                            <h2>{{item.infoTitle}}</h2>
                            <p>{{item.infoApplyUserName}}  {{item.levelText}}</p>
                            <p><span>{{item.infoVerifyTime}}</span><span>{{item.likedCount}}</span></p>
                        </div>
                    </li>
                    <li class='newsimg'><img :src='item.infoTitlePicture'></li>
                </ul>
            </a>
            <div class="more cb" @click="getmoredata" v-show="newslist3.length>0&&more3">加载更多>></div>
        </div>
        <div class="newslist" :class="{none:tabsign!=4}">
            <a :href='item.aurl' v-for="item in newslist4">
                <ul class='newslist_unit cbafter'>
                    <li class='newstit'>
                        <div class="newsdetailtit">
                            <h2>{{item.infoTitle}}</h2>
                             <p>{{item.infoApplyUserName}}  {{item.levelText}}</p>
                            <p><span>{{item.infoVerifyTime}}</span><span>{{item.likedCount}}</span></p>
                        </div>
                    </li>
                    <li class='newsimg'><img :src='item.infoTitlePicture'></li>
                </ul>
            </a>
            <div class="more cb" @click="getmoredata" v-show="newslist4.length>0&&more4">加载更多>></div>
        </div>
    </div>
</template>
<script>
import 'assets/reset.css'
import Public from 'assets/public.js'
export default {
    data() {
            return {
                newslist: [], //公用
                newslist1: [], //最新
                newslist2: [], //糖尿
                newslist3: [], //高血压
                newslist4: [], //其他
                tabsign: "1", //1最新，2糖尿，3高血压，4其他
                getlistopt: {
                    "infoType": "", //资讯类别：字典base_informationType,所有资讯是传""或者null
                    "newInfoFlag": "1", //是否为最新资讯标签, "1"为是
                    "pageNo": 1 //页数
                },
                pageNo1: 1,
                pageNo2: 1,
                pageNo3: 1,
                pageNo4: 1,
                more1: true,
                more2: true,
                more3: true,
                more4: true,
            }
        },
        components: {

        },
        ready() {
            var that = this;
            // this.tabsign = Public.getParameter("tabsign")?Public.getParameter("tabsign"):"1";
            this.getlist();
            this.pageNo1++;
             // this.tabgetlist();

        },
        methods: {
            tabgetlist(event) {
                    let tabtext = $(event.target).html();
                    if (tabtext == '最新') {
                        this.getlistopt.infoType = '';
                        this.getlistopt.newInfoFlag = 1;
                        this.tabsign = "1";
                        

                    } else if (tabtext == '糖尿病') {
                        this.getlistopt.infoType = '02';
                        this.getlistopt.newInfoFlag = '0';
                        this.tabsign = "2";
                        if (this.pageNo2 == 1) {
                            this.getlistopt.pageNo=this.pageNo2;
                            this.getlist();
                              this.pageNo2++
                        }

                    } else if (tabtext == '高血压') {
                        this.getlistopt.infoType = '01';
                        this.getlistopt.newInfoFlag = '0';
                        this.tabsign = "3";
                        if (this.pageNo3 == 1) {
                             this.getlistopt.pageNo=this.pageNo3;
                            this.getlist();
                              this.pageNo3++
                        }

                    } else {
                        this.getlistopt.infoType = '99';
                        this.getlistopt.newInfoFlag = '0';
                        this.tabsign = "4";
                        if (this.pageNo4 == 1) {
                            this.getlistopt.pageNo=this.pageNo4;
                            this.getlist();
                            this.pageNo4++
                        }

                    };

                },
                getlist() {
                    var that = this;
                    let shareObjType = Public.getParameter("shareObjType");
                    let shareObjId = Public.getParameter("shareObjId");
                    $.when(Public.commonajax("coms.healthMessageService", "queryValidMessage", "[" + JSON.stringify(this.getlistopt) + "]")).done(
                        function(res) {
                            if (res.code == 200) {
                                $.each(res.body, function(index, el) {
                                    el.infoVerifyTime = el.infoVerifyTime.substring(0, 10);
                                    el.aurl = "apphealthnews.html?sharedObjId=" + el.infoId + "&shareObjType=" + shareObjType + "&shareObjId=" + shareObjId
                                    // + "&tabsign=" + that.tabsign;
                                    el.infoTitlePicture = Public.IMGVIEW_URL() + el.infoTitlePicture;
                                });

                                if (that.getlistopt.infoType == '02') {
                                    that.newslist2=that.newslist2.concat(res.body);
                                        if (res.body.length < 5) {
                                            that.more2 = false
                                        }

                                } else if (that.getlistopt.infoType == '01') {
                                    that.newslist3=that.newslist3.concat(res.body);
                                        if (res.body.length < 5) {
                                            that.more3 = false
                                        }

                                } else if (that.getlistopt.infoType == '') {

                                     that.newslist1=that.newslist1.concat(res.body);
                                        if (res.body.length < 5) {
                                            that.more1 = false
                                        }
                                } else {

                                    that.newslist4=that.newslist4.concat(res.body);
                                        if (res.body.length < 5) {
                                            that.more4 = false
                                        }
                                }
                            }
                        })
                },
                getmoredata() {
                    if (this.getlistopt.infoType == '02') {
                        this.getlistopt.pageNo = this.pageNo2;
                        this.pageNo2++
                    } else if (this.getlistopt.infoType == '01') {
                       this.getlistopt.pageNo= this.pageNo3;
                        this.pageNo3++
                    } else if (this.getlistopt.infoType == '') {
                        this.getlistopt.pageNo = this.pageNo1;
                        this.pageNo1++ 
                    } else {
                        this.getlistopt.pageNo = this.pageNo4;
                        this.pageNo4++
                    }
                    this.getlist();
                }

        }
}
</script>
<style scoped>
/*.header {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #23be82;
    color: #fff;
    position: relative;
    text-align: center;
}

.header a {
    display: block;
    top: 0;
    color: #fff;
    padding: 0 10px;
}

.hd-title {
    line-height: 60px;
    font-size: 18px;
}
*/
/*.return {
    display: block;
    width: 30px;
    height: 60px;
    background: #23be82 url(../../assets/img/return-bg.png) no-repeat center center;
    background-size: auto 45%;
    position: absolute;
    font-size: 0;
}*/

.newslist {
    width: 100%;
}

.newslist a {
    display: block;
    padding: 10px;
    border-bottom: 1px dotted #f1f1f1;
}

.newslist_unit {
    width: 100%;
    box-sizing: border-box;
}

.newslist_unit li {
    float: left;
}

.newslist_unit .newsimg img {
    width: 75px;
    border-radius: 6px;
    height: 70px;
}

.newslist_unit .newstit {
    width: 70%;
}

.newslist_unit .newsimg {
    width: 25%;
    margin-left: 5%
}

.newsdetailtit {
    line-height: 26px;
    font-size: 14px;
}

.newsdetailtit h2 {
    line-height: 26px;
    font-size: 14px;
}

.newsdetailtit p span {
    /*display: block;*/
    padding: 0 10px 0 20px;
    color: #ccc;
    line-height: 22px;
}
.newsdetailtit p:nth-child(2) {
    background: url(../../assets/img/userbg.png) no-repeat left center;
    background-size: 15px 15px;
    padding: 0 10px 0 20px;
    color: #ccc;
    line-height: 22px;
}
/*.newsdetailtit p span:nth-child(1) {
    background: url(../../assets/img/userbg.png) no-repeat left center;
    background-size: 15px 15px;
}*/

.newsdetailtit p span:nth-child(1) {
    background: url(../../assets/img/timeover.png) no-repeat left center;
    background-size: 12px 12px;
}
.newsdetailtit p span:nth-child(2) {
    background: url(../../assets/img/zhan1.png) no-repeat left center;
    background-size: 12px 12px;
}
ul.tab1 {
    height: 40px;
}

ul.tab1>li {
    width: 25%;
    height: 40px;
    line-height: 40px;
    float: left;
    border-bottom: #ccc 1px solid;
    text-align: center;
}

ul.tab1>li.cur {
    border-bottom: #00CC00 2px solid;
    color: #00CC00
}

.more {
    height: 40px;
    width: 100%;
    line-height: 40px;
    color: #23be82;
    text-align: center;
    font-size: 12px
}

</style>
